<template>
    <div>
        <!--        <div class="crumbs">-->
        <!--            <el-breadcrumb separator="/">-->
        <!--                <el-breadcrumb-item><i class="el-icon-setting"></i> 设备管理</el-breadcrumb-item>-->
        <!--            </el-breadcrumb>-->
        <!--        </div>-->
        <div class="container" style="justify-content: space-between;min-height: 800px;border: 0;">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="24" :lg="24">
                    <div class="content-show">
                        <!--<div style="line-height: 60px;font-size: 18px;font-weight:500;border-bottom: 1px dashed #eee;"><i class="el-icon-menu"/>设备列表</div>-->
                        <div class="handle-box" style="margin:10px 10px;">
                            <el-tag class="tag-header" :class="selectTag==0?'active':''" @click="selectClick(0)">日</el-tag>
                            <el-tag class="tag-header" :class="selectTag==1?'active':''" @click="selectClick(1)">月</el-tag>
                            <el-date-picker v-model="statisticTime" size="mini"
                                            :type="pickerType" value-format="yyyy-MM-dd"
                                            @change="selectDate"
                                            placeholder="选择日期">
                            </el-date-picker>
                            <el-tooltip effect="dark" content='超过自动上报时间，可在补完数据点击"保存"之后再点击"手动补传"，并在外网主机省平台点击"手动上传"' placement="top-start">
                                <el-button type="success" @click="searchEquiment" style="margin-left: 25px;">手动补传</el-button>
                            </el-tooltip>

                        </div>
                        <el-table
                                :data="tableData"
                                border
                                expand-on-click-node
                                stripe class="table"
                                ref="multipleTable"
                                style="width: 100%">
                            <el-table-column type="index" width="55" align="center"  label="序号"></el-table-column>
                            <el-table-column
                                    prop="deviceName"
                                    label="采集点名称"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="energyVal"
                                    label="上报值"
                                    align="center"
                            >
                                <template slot-scope="scope">
                                    <div>
                                        <el-input
                                                size="mini"
                                                placeholder="请输入内容"
                                                v-model="scope.row.energyVal">
                                            <span slot="suffix" style="color:#333;">{{scope.row.unit}}</span>
                                        </el-input>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="coe"
                                    label="折标系数"
                                    align="center"
                            >
                                <template slot-scope="scope">
                                    <div>
                                        <el-input
                                                size="mini"
                                                placeholder="请输入内容"
                                                v-model="scope.row.coe">
                                            <span slot="suffix" style="color:#333;">{{scope.row.cunit}}</span>
                                        </el-input>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="recordDate"
                                    label="采集时间"
                                    align="center"
                                    :formatter="formatRecordDate">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            type="primary"
                                            @click="handleSave(scope.$index, scope.row)">保存</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--<div class="pagination">-->
                            <!--<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="page_total" :page-size="page_size">-->
                            <!--</el-pagination>-->
                        <!--</div>-->
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <span style="font-size: 16px;line-height: 24px;">超过自动上报时间，可在补完数据点击"保存"之后再点击"手动补传"，并在外网主机省平台点击"手动上传"</span>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSure">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import {getReinputDeviceList,saveInputDataRecord,getManualReportJsonData} from '../../../api/index';
    export default {
        name: "",
        data() {
            return {
                cur_page: 1,
                page_size: 100,
                page_total: 1,
                selectTag:0,
                pickerType:'date',
                statisticTime:'',
                tableData: [],//列表数据
                dialogVisible: false,
            }
        },
        created() {
            this.statisticTime = this.formatTime('date')
            this.getData();
        },
        methods: {
            formatTime(type){
                let time=new Date().getTime()-24*60*60*1000;
                let yesterday=new Date(time);
                let year=yesterday.getFullYear();
                let month=yesterday.getMonth()+1;
                let day=yesterday.getDate();
                let newYesterday=''
               if(type == 'date'){
                   newYesterday=year + "-" + (month> 9 ? month : "0" + month ) + "-" +(day> 9 ? (day) : "0" + (day));
               }
                if(type == 'month'){
                    newYesterday=year + "-" + (month> 9 ? month : "0" + month) +'-01';
                }
                return newYesterday
            },
            formatUnit(row, column, cellValue){
                return cellValue+' '+row.cunit;
            },
            formatRecordDate(row, column, cellValue){
                let cellStr = cellValue
                if(this.pickerType == 'month'){
                    cellStr = cellValue.substring(0,7)
                }
                return cellStr;
            },
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.seach();//点击分页获取数据
            },
            //获取数据
            getData(){
                getReinputDeviceList({
                }).then((res) =>{
                    let dataList = res.datas
                    for(let i=0;i<dataList.length;i++){
                        dataList[i]['recordDate'] = this.statisticTime
                        dataList[i]['dataType'] = this.selectTag
                        dataList[i]['energyVal'] = 0
                    }
                    this.tableData = dataList
                    console.log(this.tableData)
                })
            },
            selectClick(v){
                this.selectTag = v;
                if(v==0){
                    this.pickerType = 'date';
                    this.statisticTime = this.formatTime('date');
                }
                if(v==1){
                    this.pickerType = 'month';
                    this.statisticTime = this.formatTime('month');
                }
                this.getData();
            },
            selectDate(){
                this.getData()
            },
            searchEquiment(){
                this.dialogVisible = true
            },
            handleSave($index, $row){
                let param = {
                        dataType: $row.dataType,
                        energyCode: $row.energyTypeId,
                        deviceId:$row.id,
                        orgId: $row.orgId,
                        // gourpId:'',
                        recordDate:$row.recordDate,
                        energyVal: $row.energyVal,
                        coe:$row.coe
                }
                saveInputDataRecord(param).then(res=>{
                    console.log(res)
                    if(res.success){ this.$message.success(res.message)}
                    else{this.$message.error(res.message)}
                })
            },
            handleSure() {
                getManualReportJsonData({dateStr:this.statisticTime}).then(res=>{
                    if(res.success){this.$message.success(res.message)}
                    else{this.$message.error(res.message)}
                    this.dialogVisible = false
                })
            }
        }
    }
</script>
<style scoped>
    .handle-box {
        margin-bottom: 20px;
        margin-top: 20px;
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    /deep/ .el-tag{
        margin-right: 25px;
        line-height: 36px;
        height: 36px;
        font-size: 16px;
        background-color: #fff;
        border: 0;
        cursor: pointer;
    }
    .tag-header{
        color: #0FBBB5;
    }
    .tag-header.active{
        color: #fff;
        background-color: #0fbbb5;
    }
</style>
